<template>
    <el-card>
        <Components title="今日订单" :value="numberFormat(orderToday)">
            <v-chart :option="getOption()" />
            <template #footer>
                <span>昨日订单量</span>
                <span class="emphasis">{{ moneyFormat(orderLastDay) }}</span>
            </template>
        </Components>
    </el-card>
</template>

<script lang="ts">
import Components from './Components.vue'
export default {
    name: 'TodayOrders',
    components: {
        Components
    }
}
</script>
<script lang="ts" setup>
import { computed } from 'vue'
import { useReportDataStore } from '@/stores/reportData'
import useFormat from '@/hooks/userForm'
const reportDataStore = useReportDataStore()
const { numberFormat, moneyFormat } = useFormat()

// 今日订单
const orderToday = computed(() => reportDataStore.reportData.orderToday)
// 昨日订单量
const orderLastDay = computed(() => reportDataStore.reportData.orderLastDay)
// 销量
const orderTrend = computed(() => reportDataStore.reportData.orderTrend)
// 时间
const orderTrendAxis = computed(() => reportDataStore.reportData.orderTrendAxis)

// 
const getOption = () => {
    return {
        xAxis: {
            type: 'category',
            data: orderTrendAxis.value,
            boundaryGap: false,
        },
        yAxis: {
            type: 'value',
            splitLine: { show: false },
        },
        series: [
            {
                data: orderTrend.value,
                type: 'line',
                smooth: true,
                symbol: "none",
                areaStyle: {},
                lineStyle: {
                    width: 0
                },
            }
        ],
        tooltip: {
            trigger: 'axis',
        },
        grid: {
            left: 0,
            top: 0,
            bottom: 0,
            right: 0
        },
    };
}
</script>

<style>
</style>